<!--
 * @Author: fanyaqing
 * @Date: 2021-08-16 15:00:30
 * @LastEditTime: 2021-08-16 17:11:57
 * @LastEditors: fanyaqing
 * @Description: 
 * @FilePath: \supermall\src\components\common\toast\Toast.vue
-->
<template>
  <div class="toast" v-show="isShow">
    <div>
    {{message}}

    </div>
  </div>
</template>
<script>
export default {
  props:{
    message:{
      type:String,
      default:''
    },
    isShow:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    show(message,duration=2000){
      this.isShow=true;
      this.message=message,
      
      setTimeout(() => {
        this.isShow=false;
        this.message=''
      }, duration);
    }
  }
}
</script>
<style scoped>
  .toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;

    padding: 8px 10px;
    color: #fff;
    background-color: rgba(0,0,0, 0.75);
  }
</style>